<template>
<div id="pay">
<div class="el-icon-check" style="height: 50px; width: 50px">

  <div id="qrCode" ref="qrCodeDiv"></div>
</div>
</div>

</template>

<script>
import QRCode from 'qrcodejs2';
export default {
  name: "pay",
  data(){
    return{
      img:'',
    }
  },
  props:{
    pay:null,
    id:null,
    email:null,
    price:null,
  },
  mounted() {
    new QRCode(this.$refs.qrCodeDiv, {
      text: this.pay,
      width: 250,
      height: 250,
      colorDark: "#333333", //二维码颜色
      colorLight: "#ffffff", //二维码背景色
      correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
    })
  },
  created(){
   let taskId = setInterval(() => {
      // 查询订单状态
      this.$http.get("http://localhost:8088/payState",{
        params:{
          id:this.id,
        }
     }).then(resp=>{
       if (resp.data){
         console.log("成功")
         // 如果支付成功就干掉轮询
         clearInterval(taskId)
         this.$message({
           message: '恭喜你，支付成功！',
           type: 'success',
           center:true,
         });
         // 然后跳转
         this.$http.get("http://localhost:8088/user/findCompleteOrder", {
           params: {
             email: this.email,
           }
         }).then(resp => {
           this.$router.push({
             name: 'user_order',
             query: {
               order: resp.data,
               email: this.email,
             }
           }).catch(err => {
             console.log(err)
           })
         }).catch(err => {
           console.log(err)
         })
       }
      })
    }, 5000)
  }
}
</script>

<style scoped>

#pay{
  background: url("../assets/wx.png");
  background-repeat: repeat-x;
  background-attachment: fixed;
  background-size: 585px 780px;
  width: 100%;
  height: 100%;
  padding-left: 460px;

}
.el-icon-check{
  padding-top: 200px;
float: left;
  padding-left: 100px;
}

</style>